import styled from 'styled-components';
import React, { CSSProperties, ReactNode, useCallback, useEffect, useState } from 'react';
import { Button, Select, Col, Row, Input } from 'antd';
import {
    ProForm,
    ProFormText,
    ProFormSelect,
    ProFormTextArea,
    ProFormGroup,
    ProFormItem
} from '@ant-design/pro-components';

import { ConnectorDataSource } from '../../services';

export interface DatabaseInputProps {
    hideTypeSelect?: boolean;
    value: string;
    onChange?: (value: string) => Promise<void> | void;
}

const STORAGE_TYPES = [{
    identifier: 'mysql',
    name: 'MySQL',
}, {
    identifier: 'sqlite',
    name: 'SQLite',
}]

export const DatabaseInput: React.FC<DatabaseInputProps> = (props) => {

    return (
        <Row gutter={[6, 6]}>
            {
                !props.hideTypeSelect &&
                <Col span={12}>
                    <Select
                        style={{ flex: 1, minWidth: '120px' }}
                        value={getValue(props.value, 'databaseType')}
                        onChange={async (value) => {
                            props.onChange && await props.onChange(setValue(props.value, 'databaseType', value));
                        }}
                        options={STORAGE_TYPES.map((item, index) => {
                            return {
                                value: item.identifier,
                                label: item.name
                            };
                        })} />
                </Col>
            }
            <Col span={24}>
                <Input value={getValue(props.value, 'url')}
                    placeholder={'地址'}
                    onChange={async (event) => {
                        props.onChange && await props.onChange(setValue(props.value, 'url', event.target.value));
                    }} />
            </Col>
            <Col span={12}>
                <Input value={getValue(props.value, 'username')}
                    placeholder={'用户名'}
                    onChange={async (event) => {
                        props.onChange && await props.onChange(setValue(props.value, 'username', event.target.value));
                    }} />
            </Col>
            <Col span={12}>
                <Input.Password value={getValue(props.value, 'password')}
                    placeholder={'密码'}
                    onChange={async (event) => {
                        props.onChange && await props.onChange(setValue(props.value, 'password', event.target.value));
                    }} />
            </Col>
        </Row>
    );
}

const getValue = (obj: string, key: string): string | undefined => {
    if (!obj || obj === '') {
        return undefined;
    }
    console.log(obj, key);
    let ds = JSON.parse(obj);
    if (key in ds) {
        return JSON.parse(obj)[key];
    } else {
        return undefined;
    }
}

const setValue = (obj: string, key: string, value: string): string => {
    let ds: ConnectorDataSource = {
        protocol: 'mysql',
        url: '',
        database_type: 'mysql',
        username: '',
        password: '',
        options: {},
    };
    if (obj || obj !== '') {
        ds = JSON.parse(obj);
    }
    ds[key] = value;
    return JSON.stringify(ds);

    // return `{"protocol":"${ds.protocol}","url":"${ds.url}","database_type":"${ds.database_type}","username":"${ds.username}","password":"${ds.password}","options":"${ds.options}"}`;
}